﻿<%@ Page Title="" Language="C#" MasterPageFile="~/GuestLayout.master" AutoEventWireup="true"
    CodeBehind="Home.aspx.cs" Inherits="ChatForum.Client.Home" %>

<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="server">
    <div>
        <asp:ListView ID="categoryPostList" runat="server" ClientIDMode="Predictable" OnItemDataBound="OnCategoryItemBound">
            <ItemTemplate>
                <div class="categoryRowStyle">
                    <div class="categoryHeaderStyle borderStyle">
                        <img alt="IMG" id="expanderImage" class="expanderImageClass" src="./images/collapsed.png"
                            onclick="OnToggleExpander(this);" runat="server" />
                        <asp:Label ID="Label1" Text='<%#Eval("Name")%>' runat="server" CssClass="categoryHeaderNameClass" />
                    </div>
                    <div class="categoryDetailStyle borderStyle" id="categoryDetailDiv" runat="server">
                        <asp:ListView ID="categorySpecificPostList" runat="server">
                            <ItemTemplate>
                                <div style="margin: 5px 5px 5px 50px">
                                    <table style="width: 100%">
                                        <tr>
                                            <td>
                                                <asp:LinkButton ID="LinkButton1" Text='<%#Eval("PostShortDescription") %>' PostBackUrl='<%#("~/PostThread.aspx?postId="+Eval("PostId"))%>'
                                                    runat="server" />
                                            </td>
                                            <td style="text-align: right">
                                                <span>on </span>
                                                <asp:Label ID="Label1" Text='<%#Eval("CreateDate") %>' runat="server" />
                                                <span>by </span>
                                                <asp:Label ID="Label2" Text='<%#Eval("PostCreatedBy") %>' runat="server" />
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </ItemTemplate>
                        </asp:ListView>
                    </div>
                </div>
            </ItemTemplate>
        </asp:ListView>
    </div>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="scriptContent" runat="server">
    <script type="text/javascript">
        function OnToggleExpander(v) {
            var imgId = v.id;
            var currentItemIndex = imgId.charAt(imgId.length - 1);

            var detailDivIdFormat = 'mainContent_mainContent_categoryPostList_categoryDetailDiv_';

            var imgIdFormat = 'mainContent_mainContent_categoryPostList_expanderImage_';

            var allRow = document.querySelectorAll('.categoryRowStyle');
            for (var i = 0; i < allRow.length; i++) {
                var detailDiv = document.getElementById(detailDivIdFormat + i); //get the div to show or hide
                var imageLink = document.getElementById(imgIdFormat + i); //get the image to expand or collapse
                //this is the current row, show/hide on the basis of its current condition
                if (i == currentItemIndex) {
                    if (detailDiv.style.display == 'none' || detailDiv.style.display == '') {
                        imageLink.src = './images/expanded.png';
                        detailDiv.style.display = 'block';
                    }
                    else {
                        imageLink.src = './images/collapsed.png';
                        detailDiv.style.display = 'none';
                    }
                }
                //hide all other rows
                else {
                    imageLink.src = './images/collapsed.png';
                    detailDiv.style.display = 'none';
                }
            }

        }
    </script>
</asp:Content>
